import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from 'postcss-pxtorem'
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//ant-design-vue
import {AntDesignVueResolver} from "unplugin-vue-components/resolvers"
import { resolve } from "path";
const pathResolve = (dir) => resolve(__dirname, dir);
export default defineConfig({
  resolve: {
    alias: {
     "@": pathResolve("./src")
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  plugins: [
    vue(),
    
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //ant-design-vue
      resolvers: [AntDesignVueResolver()]
    }),

   Components({
      //ant-design-vue   importStyle = false 样式就没了
        resolvers: [AntDesignVueResolver({importStyle: false})],
    }),
  ],
  
  css: {
    // 配置 CSS modules 的行为。选项将被传递给 postcss-modules
    modules: {},
    // 内联的 PostCSS 配置（格式同 postcss.config.js）
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // 1rem 的大小
          propList: ['*'], // 需要转换的属性，*(全部转换)
          unitPrecision: 6 // 转换精度，保留的小数位数
        })
      ]
    }
  },
  server: {
    host: '0.0.0.0', // 解决vite use--host to expose
    port: 3000, // 设置端口号
    open: true // 服务启动后自动打开浏览器
  }
})


